<template>
  <div :style="styleCss" class="disnode">
    <el-tabs v-model="activeName" :style="styleCss">
      <el-tab-pane label="理论课程" name="理论">
        <courseware
          tabLabel="理论"
          ref="理论"
          :styleCss="styleCss"
          :croueid="croueid"
          @upId="updateID"
          :titleA.sync="activeNameA"
          :isSuer="isSuer"
        >
        <slot></slot>
        </courseware>
      </el-tab-pane>
      <el-tab-pane :label="title" name="实操" v-if="SCstudent">
        <courseware
          tabLabel="实操"
          ref="实操"
          :styleCss="styleCss"
          :croueid="croueid"
          @upId="updateID"
          :titleA.sync="activeNameA"
          :isSuer="isSuer"
        ><slot></slot></courseware>
      </el-tab-pane>
      <el-tab-pane label="试题讲解" v-if="TKstudent" name="试题">
        <courseware
          tabLabel="试题"
          ref="试题"
          :styleCss="styleCss"
          :croueid="croueid"
          @upId="updateID"
          :titleA.sync="activeNameA"
          :isSuer="isSuer"
        ><slot></slot></courseware>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import courseware from "./courseware";
import { mapGetters } from "vuex";
export default {
  props: ["styleCss", "tabLabel"],
  components: { courseware },
  computed: { ...mapGetters(["initObj"]) },
  data() {
    return {
      activeName: "理论",
      isquerymodel: true,
      SCstudent: true,
      TKstudent: false,
      isSuer: true, //是否是菜单进入
      activeNameA: "全部",
      title: "",
      croueid:null,
    };
  },
  watch: {
    activeName(val) {
      this.$refs[val].listValue();
      this.$emit("update:tabLabel", val);
    },
    activeNameA(val) {
      this.$emit("update:title", val);
    },
  },
  methods: {
    listdata(){
      this.$refs[this.activeName].listValue();
    },
    changesubjct(subject_id) {
      this.isSuer = false;
      this.$refs[this.activeName].changesubjct(subject_id);
    },
    updateID(id) {
      this.$emit("update:croueid", id);
    },
  },
  created() {

    this.$emit("update:tabLabel", this.activeName);
    this.isquerymodel =
      JSON.parse(this.initObj.setting) &&
      JSON.parse(this.initObj.setting).SCstudent
        ? JSON.parse(this.initObj.setting).SCstudent == "是"
        : false;
    this.SCstudent = JSON.parse(this.initObj.setting).SCstudent
      ? JSON.parse(this.initObj.setting).SCstudent == "是"
      : false;
    this.TKstudent = JSON.parse(this.initObj.setting).TKstudent
      ? JSON.parse(this.initObj.setting).TKstudent == "是"
      : false;
    // console.log(JSON.parse(this.initObj.setting).TKstudent, "tikutiku");
    this.title =
      JSON.parse(this.initObj.setting) &&
      JSON.parse(this.initObj.setting).fonrcan
        ? JSON.parse(this.initObj.setting).fonrcan
        : "实操";
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$route.params.tabLabel) {
        this.activeName = this.$route.params.tabLabel;
        // this.activeNameA = this.$route.params.activeName;
        // this.croueid=this.$route.params.id
      }
      if (this.isSuer) {
        
      }
    });
  },
};
</script>
<style lang="scss">
.el-tabs__content{
    position: static;
  }
  .el-tabs {
    position: relative;
  }
</style>
<style lang="scss">
.disnode{

  .el-tabs__nav{
    display: flex;
    margin-bottom: 16px;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
  }
    .el-tabs__active-bar{
      display: none !important;
    }
    .el-tabs__item{
      height: 33px !important;
      line-height: 1.2 !important;
      width: 80px !important;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #F5F5F5;
      font-size: 14px;
      padding:0;
      color: #999999;
    }
    .is-active{
      background: #fff;
      color: #000 !important;
    }
    .el-tabs__item:hover{
      color: #000;
    }
    .el-tabs__nav-wrap::after{
      background: #eee;
      height: 1px;
    }
}
  
</style>